<template>
	<view class="btn">
		<button type="primary" @click="handleCamera">拍照</button>
		<button @click="cha">添加水印</button>
	</view>
	<view class="container">
		<form @submit="formSubmit" @reset="formReset">
			<!-- 单选 1 -->
			<view class="form-item">
				<text class="label">单选 1：</text>
				<radio-group name="single1">
					<label class="radio-item" v-for="(item, index) in singleOptions1" :key="index">
						<radio :value="item.value" />
						{{ item.label }}
					</label>
				</radio-group>
			</view>

			<!-- 单选 2 -->
			<view class="form-item">
				<text class="label">单选 2：</text>
				<radio-group name="single2">
					<label class="radio-item" v-for="(item, index) in singleOptions2" :key="index">
						<radio :value="item.value" />
						{{ item.label }}
					</label>
				</radio-group>
			</view>

			<!-- 多选 1 -->
			<view class="form-item">
				<text class="label">多选 1：</text>
				<checkbox-group name="multi1">
					<label class="checkbox-item" v-for="(item, index) in multiOptions1" :key="index">
						<checkbox :value="item.value" />
						{{ item.label }}
					</label>
				</checkbox-group>
			</view>

			<!-- 多选 2 -->
			<view class="form-item">
				<text class="label">多选 2：</text>
				<checkbox-group name="multi2">
					<label class="checkbox-item" v-for="(item, index) in multiOptions2" :key="index">
						<checkbox :value="item.value" />
						{{ item.label }}
					</label>
				</checkbox-group>
			</view>

		</form>
	</view>
	<view class="img">
		<image :src="filePath"></image>
		<canvas canvas-id="watermarkCanvas" class="canvas" v-show="false"></canvas>
		<image :src="watermarkedImage" v-if="watermarkedImage" class="image"></image>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const singleOptions1 = [
        { value: '1', label: '是' },
        { value: '0', label: '否' },
        { value: '2', label: '未调查' }
      ]
      // 单选 2 数据
     const singleOptions2= [
        { value: '1', label: '江苏省镇江市句容市宝华镇恒大雅苑' },
        { value: '2', label: '江苏省南京市栖霞区万达茂中心 D 座 720' }
      ]
      // 多选 1 数据
     const multiOptions1= [
        { value: '1', label: '淘宝' },
        { value: '2', label: '京东' },
        { value: '3', label: '天猫' },
        { value: '4', label: '拼多多' }
      ]
      // 多选 2 数据
     const multiOptions2= [
        { value: '1', label: '江苏省镇江市句容市宝华镇恒大雅苑' },
        { value: '2', label: '江苏省南京市栖霞区万达茂中心 D 座 720' },
        { value: '3', label: '江苏省南京市栖霞区御湖世家 3 期' }
      ]
const user = {
	name:'李华',
	phone:'15651735632'
}
let watermarkedImage = ref('');
let filePath = ref('');
const location = ref('');
const handleCamera = () => {
	uni.chooseImage({
		sourceType: ['camera'],
		success: function (res) {
			filePath.value = res.tempFilePaths[0];
		}
	});
};
const cha = () => {

	addWater()

	// console.log(handleDate(date));
	// console.log(watermarkedImage.value);
};
const getLocation = async () => {
	try {
		console.log('sss1');
		const res = await new Promise((resolve, reject) => {
			uni.getLocation({
				type: 'wgs84',

				success: (result) => {
					resolve(result);
				},
				fail: (err) => {
					reject(err);
				}
			});
		});
		const local = `${res.longitude},${res.latitude}`
		return local;

	} catch (err) {
		console.log(err, '获取位置失败');
	}
};
const addZero = (n) => {
	return n > 9 ? '' + n : '0' + n;
};
const handleDate = (time) => {
	const date = new Date(time);
	const year = date.getFullYear();
	const month = addZero(date.getMonth() + 1);
	const day = addZero(date.getDate());
	const h = addZero(date.getHours());
	const m = addZero(date.getMinutes());
	const s = addZero(date.getSeconds());
	return `${year}-${month}-${day}  ${h}:${m}:${s}`;
};

const addWater = () => {
	const ctx = uni.createCanvasContext('watermarkCanvas', this);
	uni.getImageInfo({
		src: filePath.value,
		success: (res) => {
			ctx.drawImage(res.path, 0, 0, 300, 300);
			console.log(res.size);
			ctx.setFontSize(10);
			ctx.setTextAlign('center');
			ctx.setTextBaseline('middle');
			ctx.fillText('李华', 50, 50);
			const date = new Date();
			ctx.fillText(handleDate(date), 70, 70);
			getLocation().then(local => {
				location.value = local
				console.log(location.value);
				if (location.value) {
					ctx.fillText(location.value, 50, 80);
				}
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'watermarkCanvas',
						success: (res) => {
							watermarkedImage.value = res.tempFilePath;
						}
					});
				});

			})

		}
	});
};
</script>

<style lang="less" scoped>
.img {
	border: 1px solid red;
	width: 50vw;
	height: 15vh;
	image {
		width: 100%;
		height: 100%;
		border: 1rpx solid red;
	}
}
</style>
